<template>
  <section class="msite">
      <!--首页头部-->
      
      <head-top :title="address.name">
          <span class="header-search" slot="left">
              <i class="el-icon-search"></i>
          </span>
          <span class="header-login" slot="right">
              <span class="header-login-text">登录|注册</span>
          </span>
      </head-top>
      <!--首页导航-->
      <div class="miste-content-wraper">
          <div >
              <nav class="msite-nav">
                <div class="swiper-container">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide" v-for="(categorys,index) in categorysArr" :key="index">
                            <a href="javascript:;" class="link-to-food" v-for="(category,index) in categorys" :key="index">
                                <div class="food-contianer">
                                    <img :src="baseImgurl + category.image_url" alt="">
                                </div>
                                <span>{{category.title}}</span>
                            </a>
                            
                        </div>
                        
                    </div>
                    <div class="swiper-pagination"></div>
                </div>
            </nav>
            <!--首页附近商家-->
            <div class="nearly-shop">
                <div class="nearly-shop-top">
                    <div>
                        <i class="el-icon-menu"></i>
                    </div>
                    <span>附近商家</span>
                </div>
                <shop-list></shop-list>
            </div>
          </div>
      </div>

  </section>
</template>

<script>
import Swiper from 'swiper'
import 'swiper/swiper.min.css'
import HeadTop from '../../components/HeadTop/HeadTop.vue'
import ShopList from '../../components/ShopList/ShopList.vue'
import {mapState} from 'vuex'
export default {
    data () {
        return {
            baseImgurl:'https://fuss10.elemecdn.com'      
        }
    },
    watch:{
        categorys(value){
            setTimeout(()=>{
                new Swiper('.swiper-container',{
                loop:true,
                autoplay: true,
                pagination:{
                    el:'.swiper-pagination',
                }
            },100)
            })
        }
    },
    mounted(){
        this.$store.dispatch('getCategorys')
        this.$store.dispatch('getShops')
        
    },
    components:{
        ShopList,
        HeadTop
    },
    computed:{
        ...mapState(['address','categorys',]),
        categorysArr(){
            const {categorys} = this
            const arr = []
            let minarr = []
            categorys.forEach(c => {
                if(minarr.length === 8){
                    minarr = []
                }
                if(minarr.length === 0){
                    arr.push(minarr)
                }
                minarr.push(c)
            });

            return arr
        }
    }

}
</script>

<style lang="less" scoped>

.miste-content-wraper{
    position: fixed;
    top: 45px;
    bottom: 46px;
    width: 100%;
    margin: 0 5px;
    .msite-nav{
        border-bottom: 1px solid lightgray ;
        margin-top: 15px;
        height: 200px;
        background-color: #fff;
        position: relative;
        .swiper-pagination{
            position: absolute;
            z-index: 20;
            bottom: 10px;
            width: 100%;
            text-align: center;
        }
        .swiper-wrapper{
            width: 100%;
            height: 100%;
            .swiper-slide{
                display: flex;
                justify-content: space-around;
                flex-wrap: wrap;
                align-items: flex-start;
                .link-to-food{
                    width: 25%;
                    .food-contianer{
                        display: block;
                        width: 100%;
                        text-align: center;
                        font-size: 0;
                        padding-bottom: 10px;
                        img{
                            display: inline;
                            width: 50px;
                            height: 50px;
                        }
                        span{
                            display: block;
                            width: 100%;
                            text-align: center;
                            font-size: 12px;
                            color: #666;
                        }

                    }
                }
            }
        }
    }
    .nearly-shop{
        margin-top: 5px;
        .nearly-shop-top{
            display: flex;
            span{
                margin-left: 5px;
                font-size: 15px;
            }
        }
    }
}
</style>